<template>
  <el-card
    :style="themeStyle"
    class="munu"
  >
    <template #header>
      <div class="header_div">
        <div>
          <span style="font-size: 15px;font-weight: 900;">{{ `统计` }}</span>
        </div>
      </div>
    </template>
    <div class="munu_box">
      <el-card
        class="carton_card"
        style="width:40%;"
        shadow="never"
      >
        <el-radio-group
          v-model="isCollapse"
          class="carton_day"
          @change="day"
        >
          <el-radio-button :label="false">日</el-radio-button>
          <el-radio-button :label="true">月</el-radio-button>
        </el-radio-group>
        <div style="padding-top: 40px;height: 100%;">
          <div class="carton_bottom">
            <div class="img1">
              <div class="img-back">
                <div
                  v-if="!isCollapse"
                  class="img-bottom"
                >今日</div>
                <div
                  v-if="isCollapse"
                  class="img-bottom"
                >今月</div>
                <div class="img-bottom">
                  <span>订单金额 :</span>
                  <span class="img-size">{{ orderAmount===null?0:orderAmount }}</span>
                  <span>￥</span>
                </div>
                <div class="img-bottom">
                  <span>订&nbsp;&nbsp;单&nbsp;&nbsp;数 :</span>
                  <span class="img-size">{{ orders===null?0:orders }}</span>
                  <span>个</span>
                </div>
                <div class="img-bottom">
                  <span v-if="!isCollapse">昨&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日 :</span>
                  <span v-if="isCollapse">昨&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月 :</span>
                  <span class="img-size">{{ orderDay===null?0:orderDay }}</span>
                  <span>￥/</span>
                  <span class="img-size">{{ orderNew===null?0:orderNew }}</span>
                  <span>个</span>
                </div>
              </div>
            </div>
            <div class="img2">
              <div class="img-back">
                <div
                  v-if="!isCollapse"
                  class="img-bottom"
                >今日</div>
                <div
                  v-if="isCollapse"
                  class="img-bottom"
                >今月</div>
                <div class="img-bottom">
                  <span>送货金额 :</span>
                  <span class="img-size">{{ deliveryMoney===null?0:deliveryMoney }}</span>
                  <span>￥</span>
                </div>
                <div class="img-bottom">
                  <span>送&nbsp;&nbsp;货&nbsp;&nbsp;数 :</span>
                  <span class="img-size">{{ deliverys===null?0:deliverys }}</span>
                  <span>个</span>
                </div>
                <div class="img-bottom">
                  <span v-if="!isCollapse">昨&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日 :</span>
                  <span v-if="isCollapse">昨&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月 :</span>
                  <span class="img-size">{{ deliveryDay===null?0:deliveryDay }}</span>
                  <span>￥/</span>
                  <span class="img-size">{{ deliveryNew===null?0:deliveryNew }}</span>
                  <span>个</span>
                </div>
              </div>
            </div>
          </div>
          <div class="carton_bottom">
            <div class="img3">
              <div class="img-back">
                <div
                  v-if="!isCollapse"
                  class="img-bottom"
                >今日</div>
                <div
                  v-if="isCollapse"
                  class="img-bottom"
                >今月</div>
                <div class="img-bottom">
                  <span>采购金额 :</span>
                  <span class="img-size">{{ purchaseMoney===null?0:purchaseMoney }}</span>
                  <span>￥</span>
                </div>
                <div class="img-bottom">
                  <span>采&nbsp;&nbsp;购&nbsp;&nbsp;数 :</span>
                  <span class="img-size">{{ purchases===null?0:purchases }}</span>
                  <span>个</span>
                </div>
                <div class="img-bottom">
                  <span v-if="!isCollapse">昨&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日 :</span>
                  <span v-if="isCollapse">昨&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月 :</span>
                  <span class="img-size">{{ purchaseDay===null?0:purchaseDay }}</span>
                  <span>￥/</span>
                  <span class="img-size">{{ purchaseNew===null?0:purchaseNew }}</span>
                  <span>个</span>
                </div>
              </div>
            </div>
            <div class="img4">
              <div class="img-back">
                <div
                  v-if="!isCollapse"
                  class="img-bottom"
                >今日</div>
                <div
                  v-if="isCollapse"
                  class="img-bottom"
                >今月</div>
                <div class="img-bottom">
                  <span>损耗金额 :</span>
                  <span class="img-size">{{ lossMoney===null?0:lossMoney }}</span>
                  <span>￥</span>
                </div>
                <div class="img-bottom">
                  <span>损&nbsp;&nbsp;耗&nbsp;&nbsp;数 :</span>
                  <span class="img-size">{{ loss===null?0:loss }}</span>
                  <span>个</span>
                </div>
                <div class="img-bottom">
                  <span v-if="!isCollapse">昨&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日 :</span>
                  <span v-if="isCollapse">昨&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月 :</span>
                  <span class="img-size">{{ lossDay===null?0:lossDay }}</span>
                  <span>￥/</span>
                  <span class="img-size">{{ lossNew===null?0:lossNew }}</span>
                  <span>个</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card
        class="reportForm_card"
        style="width:63%;"
        shadow="never"
      >
        <el-row style="height: 60%;">
          <el-col
            :span="24"
            style="height: 100%;"
          >
            <div
              class="reportForm_back"
              style="padding: 3px 45px 0px 35px;"
            >
              <div class="font">订单趋势</div>
              <el-radio-group
                v-model="brokenLine"
                size="mini"
                class="carton_week"
                @change="handBrokenLine"
              >
                <el-radio-button :label="false">近7天</el-radio-button>
                <el-radio-button :label="true">近30天</el-radio-button>
              </el-radio-group>
            </div>
            <div
              id="main"
              style="width: 100%;height:85%;"
            />
          </el-col>
        </el-row>
        <el-row style="height: 40%;">
          <el-col
            :span="11"
            style="padding: 7px;height: 100%;"
          >
            <div class="reportForm_back">
              <div class="font">客户销售额</div>
              <el-radio-group
                v-model="isColumnar"
                style="display: flex;"
                size="mini"
                @change="handColumnar"
              >
                <el-radio-button :label="false">近7天</el-radio-button>
                <el-radio-button :label="true">近30天</el-radio-button>
              </el-radio-group>
            </div>
            <div
              id="columnar"
              style="width: 100%;height:95%;"
            />
          </el-col>
          <el-col
            :span="11"
            style="padding: 7px;margin-left: 5%;height:100%"
          >
            <div class="reportForm_back">
              <div class="font">订单类型</div>
              <el-radio-group
                v-model="ispie"
                style="display: flex;"
                size="mini"
                @change="handpie"
              >
                <el-radio-button :label="false">近7天</el-radio-button>
                <el-radio-button :label="true">近30天</el-radio-button>
              </el-radio-group>
            </div>
            <div
              id="pie"
              style="width: 90%;height:90%;"
            />
          </el-col>
        </el-row>
      </el-card>
    </div>
  </el-card>
</template>

<script>
import echarts from 'echarts';
import SystemConfigAPI from '@/api/system-config'
export default {
  name: 'Menu',
  data() {
    return {
      orderAmount: '',
      orders: '',
      orderDay: '',
      orderNew: '',
      deliveryMoney: '',
      deliverys: '',
      deliveryDay: '',
      deliveryNew: '',
      purchaseMoney: '',
      purchases: '',
      purchaseDay: '',
      purchaseNew: '',
      lossMoney: '',
      loss: '',
      lossDay: '',
      lossNew: '',
      chartDom1: '',
      myData: [],
      myChart1: null,
      myChart2: null,
      myChart3: null,
      brokenLine: false,
      isColumnar: false,
      ispie: false,
      loading: false,
      isCollapse: false
    }
  },
  computed: {
    themeStyle() {
      if (localStorage.getItem('theme') === 'dark') {
        return {
          '--color1': '#3C5170',
          '--color2': '#B3B3C6',
          '--color_active1': '#e4e4f6',
          '--color_active2': '#898aa7'
        }
      } else {
        return {
          '--color1': '#1890ff',
          '--color2': '#fff',
          'color_active1': 'red',
          'color_active2': '#898aa7'
        }
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    initChart(list) {
      const delivery = Math.max(...list[0].delivery)
      const loss = Math.max(...list[0].loss)
      const order = Math.max(...list[0].order)
      const purchase = Math.max(...list[0].purchase)
      var arr = [delivery, loss, order, purchase]
      var max = Math.ceil(Math.max(...arr))
      var day = []

      for (let index = 0; index < list[0].delivery.length; index++) {
        day.push((index + 2) + '日')
      }
      if (this.myChart1) {
        this.myChart1.dispose()
      }
      // 基于准备好的dom，初始化echarts实例
      const chartDom = document.getElementById('main')
      this.myChart1 = echarts.init(chartDom, localStorage.getItem('theme'))
      var option

      // 指定图表的配置项和数据
      option = {
        grid: {
          left: '1%',
          right: '4%',
          bottom: '2%',
          top: '15%',
          containLabel: true
        },
        animation: true,
        animationDuration: 1300,
        legend: {
          data: ['订单金额', '送货金额', '采购金额', '损耗金额']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: day
        },
        yAxis: {
          type: 'value',
          name: '单位：元',
          min: 0,
          max: max,
          position: 'left',
          splitLine: {
            show: false // 去掉折线图中的横线
          },
          axisLabel: {
            formatter: '{value} '
          }
        },
        series: [
          {
            name: '订单金额',
            type: 'line',
            smooth: true,
            showSymbol: false,
            emphasis: {
              focus: 'series'
            },
            data: list[0].order,
            lineStyle: {
              color: '#FF8871'
            },
            itemStyle: {
              normal: {
                color: '#FF8871'
              }
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#FF8871'
                },
                {
                  offset: 1,
                  color: '#fff'
                }
              ])
            }
          },
          {
            name: '送货金额',
            type: 'line',
            smooth: true,
            showSymbol: false,
            emphasis: {
              focus: 'series'
            },
            lineStyle: {
              color: '#37C0EA'
            },
            itemStyle: {
              normal: {
                color: '#37C0EA'
              }
            },
            data: list[0].delivery,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#37C0EA '
                },
                {
                  offset: 1,
                  color: '#fff'
                }
              ])
            }
          },
          {
            name: '采购金额',
            type: 'line',
            smooth: true,
            showSymbol: false,
            emphasis: {
              focus: 'series'
            },
            lineStyle: {
              color: '#7d8cf4'
            },
            itemStyle: {
              normal: {
                color: '#7d8cf4'
              }
            },
            data: list[0].purchase,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#7d8cf4 '
                },
                {
                  offset: 1,
                  color: '#fff'
                }
              ])
            }
          },
          {
            name: '损耗金额',
            type: 'line',
            smooth: true,
            showSymbol: false,
            emphasis: {
              focus: 'series'
            },
            lineStyle: {
              color: '#b47eee'
            }, // 折线颜色
            itemStyle: {
              normal: {
                color: '#b47eee'
              }
            }, // 点的颜色
            data: list[0].loss,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#b47eee '
                },
                {
                  offset: 1,
                  color: '#fff'
                }
              ])
            }// 渐变颜色
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      option && this.myChart1.setOption(option)
      const that = this
      window.addEventListener('resize', function () { // 监听页面窗口的变化
        that.myChart1.resize()// 横向自适应
      })
    },
    initColumnar(list) {
      if (this.myChart2) {
        this.myChart2.dispose()
      }
      const chartDom = document.getElementById('columnar')
      this.myChart2 = echarts.init(chartDom, localStorage.getItem('theme'))
      var option

      const data = []
      for (let i = 0; i < 5; ++i) {
        data.push(Math.round(Math.random() * 200))
      }

      var bck = []
      var tel = []
      list.forEach(e => {
        bck.push(e.cusName)
        tel.push(e.orderAmt)
      })
      option = {
        tooltip: {
          trigger: 'axis'
        },
        animation: true,
        animationDuration: 1500,
        grid: {
          left: '5%',
          right: '20%',
          bottom: '4%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          max: 'dataMax',
          show: false
        },
        yAxis: {
          type: 'category',
          data: bck,
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300
        },
        series: [
          {
            type: 'bar',
            label: {
              show: true,
              position: 'right',
              valueAnimation: true
            },
            data: tel,
            itemStyle: {
              normal: {
                // 柱体的颜色
                // 右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                color: function (params) {
                  var colorList = [
                    ['#468CFF', '#91E3F7'],
                    ['#326DCE', '#619DFF'],
                    ['#7D6CFF', '#ABA0FF'],
                    ['#FF6C8B', '#FFA0E5'],
                    ['#FFAD56', '#F7FFA0']
                  ]

                  var colorItem = colorList[params.dataIndex]
                  return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: colorItem[0]
                  },
                  {
                    offset: 1,
                    color: colorItem[1]
                  }
                  ], false)
                }
              }
            }
          }
        ]
      }

      option && this.myChart2.setOption(option)
      window.onresize = this.myChart2.resize
    },
    initPie(list) {
      if (this.myChart3) {
        this.myChart3.dispose()
      }
      const chartDom = document.getElementById('pie')
      this.myChart3 = echarts.init(chartDom, localStorage.getItem('theme'))
      var option
      if (list.length === 1) {
        this.myData = [
          {
            value: list[0].orderAmt,
            name: list[0].orderTypeName,
            itemStyle: {
              normal: {// 颜色渐变
                color: new echarts.graphic.LinearGradient(
                  // 1, 1, 1, 0,  //(上-下 渐变)
                  // 1, 1, 0, 0,  //(左上-右下 渐变)
                  // 1, 0, 0, 0,  //(左-右 渐变)
                  // 0, 1, 1, 0,  //(右上-左下 渐变)
                  // 0, 1, 1, 1,  //(左-右 渐变)
                  // 1, 0, 1, 1,  //(上-下 渐变)
                  // 0, 0, 1, 0,  //(左-右 渐变)
                  0, 0, 0, 1, // (上-下 渐变)
                  [
                    { offset: 0, color: '#F370CE ' },
                    { offset: 1, color: '#33C3FE' }
                  ]
                )
              }
            }
          }
        ]
      } else if (list.length === 2) {
        this.myData = [
          {
            value: list[1].orderAmt,
            name: list[1].orderTypeName,
            itemStyle: {
              normal: {// 颜色渐变
                color: new echarts.graphic.LinearGradient(
                  // 1, 1, 1, 0,  //(上-下 渐变)
                  // 1, 1, 0, 0,  //(左上-右下 渐变)
                  // 1, 0, 0, 0,  //(左-右 渐变)
                  // 0, 1, 1, 0,  //(右上-左下 渐变)
                  // 0, 1, 1, 1,  //(左-右 渐变)
                  // 1, 0, 1, 1,  //(上-下 渐变)
                  // 0, 0, 1, 0,  //(左-右 渐变)
                  0, 0, 0, 1, // (上-下 渐变)
                  [
                    { offset: 0, color: '#F370CE ' },
                    { offset: 1, color: '#33C3FE' }
                  ]
                )
              }
            }
          },
          {
            value: list[0].orderAmt,
            name: list[0].orderTypeName,
            itemStyle: {
              normal: {// 颜色渐变
                color: new echarts.graphic.LinearGradient(
                  // 1, 1, 1, 0,  //(上-下 渐变)
                  // 1, 1, 0, 0,  //(左上-右下 渐变)
                  // 1, 0, 0, 0,  //(左-右 渐变)
                  // 0, 1, 1, 0,  //(右上-左下 渐变)
                  // 0, 1, 1, 1,  //(左-右 渐变)
                  // 1, 0, 1, 1,  //(上-下 渐变)
                  // 0, 0, 1, 0,  //(左-右 渐变)
                  0, 0, 0, 1, // (上-下 渐变)
                  [
                    { offset: 0, color: '#06ECFE' },
                    { offset: 1, color: '#49B0FE' }
                  ]
                )
              }
            }
          }
        ]
      } else {
        this.myData = [
          {
            value: list[2].orderAmt,
            name: list[2].orderTypeName,
            itemStyle: {
              normal: {// 颜色渐变
                color: new echarts.graphic.LinearGradient(
                  // 1, 1, 1, 0,  //(上-下 渐变)
                  // 1, 1, 0, 0,  //(左上-右下 渐变)
                  // 1, 0, 0, 0,  //(左-右 渐变)
                  // 0, 1, 1, 0,  //(右上-左下 渐变)
                  // 0, 1, 1, 1,  //(左-右 渐变)
                  // 1, 0, 1, 1,  //(上-下 渐变)
                  // 0, 0, 1, 0,  //(左-右 渐变)
                  0, 0, 0, 1, // (上-下 渐变)
                  [
                    { offset: 0, color: '#F0961B ' },
                    { offset: 1, color: '#FE5B54' }
                  ]
                )
              }
            }
          },
          {
            value: list[1].orderAmt,
            name: list[1].orderTypeName,
            itemStyle: {
              normal: {// 颜色渐变
                color: new echarts.graphic.LinearGradient(
                  // 1, 1, 1, 0,  //(上-下 渐变)
                  // 1, 1, 0, 0,  //(左上-右下 渐变)
                  // 1, 0, 0, 0,  //(左-右 渐变)
                  // 0, 1, 1, 0,  //(右上-左下 渐变)
                  // 0, 1, 1, 1,  //(左-右 渐变)
                  // 1, 0, 1, 1,  //(上-下 渐变)
                  // 0, 0, 1, 0,  //(左-右 渐变)
                  0, 0, 0, 1, // (上-下 渐变)
                  [
                    { offset: 0, color: '#F370CE ' },
                    { offset: 1, color: '#33C3FE' }
                  ]
                )
              }
            }
          },
          {
            value: list[0].orderAmt,
            name: list[0].orderTypeName,
            itemStyle: {
              normal: {// 颜色渐变
                color: new echarts.graphic.LinearGradient(
                  // 1, 1, 1, 0,  //(上-下 渐变)
                  // 1, 1, 0, 0,  //(左上-右下 渐变)
                  // 1, 0, 0, 0,  //(左-右 渐变)
                  // 0, 1, 1, 0,  //(右上-左下 渐变)
                  // 0, 1, 1, 1,  //(左-右 渐变)
                  // 1, 0, 1, 1,  //(上-下 渐变)
                  // 0, 0, 1, 0,  //(左-右 渐变)
                  0, 0, 0, 1, // (上-下 渐变)
                  [
                    { offset: 0, color: '#06ECFE' },
                    { offset: 1, color: '#49B0FE' }
                  ]
                )
              }
            }
          }
        ]
      }
      var data = this.myData
      option = {
        grid: {
          left: '5%',
          right: '5%',
          bottom: '12%',
          top: '20%',
          containLabel: true
        },
        animation: true,
        animationDuration: 1500,
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['20%', '70%'],
            data: data,
            height: '50%',
            left: 'center',
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            label: {
              alignTo: 'edge',
              formatter: '{name|{b}}\n{time|{c} 元}',
              // minMargin: 6,
              // edgeDistance: 15,
              // lineHeight: 20,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
            labelLine: {
              normal: {
                length: 5,
                length2: 5,
                show: true // 引导线显示
              }
            },
            labelLayout: function (params) {
              const isLeft = params.labelRect.x < this.myChart3.getWidth() / 2
              const points = params.labelLinePoints
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width
              return {
                labelLinePoints: points
              }
            }
          }
        ]
      }

      option && this.myChart3.setOption(option)
      const that = this
      window.addEventListener('resize', function () { // 监听页面窗口的变化
        that.myChart3.resize()// 横向自适应
      })
    },
    async getList() {
      // 折线图
      const res3 = await SystemConfigAPI.getList('chart', { sign: '1' })
      if (res3.code === 200) {
        const list = res3.data.pageItems
        if (list[0].delivery !== undefined) {
          this.initChart(list)
        }
      }

      // 金额
      const res = await SystemConfigAPI.getList('statistics', { sign: '1' })
      if (res.code === 200) {
        const list = res.data.pageItems
        if (list.length > 0) {
          this.statistical(list)
        }
      }

      // 柱状图
      const res1 = await SystemConfigAPI.getList('clientAmt', { sign: '1' })
      if (res1.code === 200) {
        const list = res1.data.pageItems
        if (list.length > 0) {
          this.initColumnar(list)
        }
      }

      // 饼图
      const res2 = await SystemConfigAPI.getList('orderType', { sign: '1' })
      if (res2.code === 200) {
        const list = res2.data.pageItems
        if (list.length > 0) {
          this.initPie(list)
        }
      }
    },
    // 金额
    async day(val) {
      const res = await SystemConfigAPI.getList('statistics', { sign: val === false ? '1' : '2' })
      if (res.code === 200) {
        const list = res.data.pageItems
        if (list.length > 0) {
          this.statistical(list)
        }
      }
    },
    // 柱状图
    async handColumnar(val) {
      const res = await SystemConfigAPI.getList('clientAmt', { sign: val === false ? '1' : '2' })
      if (res.code === 200) {
        const list = res.data.pageItems
        if (list.length > 0) {
          this.initColumnar(list)
        }
      }
    },
    // 饼图
    async handpie(val) {
      const res = await SystemConfigAPI.getList('orderType', { sign: val === false ? '1' : '2' })
      if (res.code === 200) {
        const list = res.data.pageItems
        if (list.length > 0) {
          this.initPie(list)
        }
      }
    },
    // 折线图
    async handBrokenLine(val) {
      const res = await SystemConfigAPI.getList('chart', { sign: val === false ? '1' : '2' })
      if (res.code === 200) {
        const list = res.data.pageItems
        if (list[0].delivery !== undefined) {
          this.initChart(list)
        }
      }
    },
    statistical(list) {
      this.orderAmount = list[0] === null ? 0 : list[0].sumAmt
      this.orders = list[0] === null ? 0 : list[0].orderNum
      this.orderDay = list[1] === null ? 0 : list[1].sumAmt
      this.orderNew = list[1] === null ? 0 : list[1].orderNum
      this.deliveryMoney = list[2] === null ? 0 : list[2].sumAmt
      this.deliverys = list[2] === null ? 0 : list[2].orderNum
      this.deliveryDay = list[3] === null ? 0 : list[3].sumAmt
      this.deliveryNew = list[3] === null ? 0 : list[3].orderNum
      this.purchaseMoney = list[4] === null ? 0 : list[4].sumAmt
      this.purchases = list[4] === null ? 0 : list[4].orderNum
      this.purchaseDay = list[5] === null ? 0 : list[5].sumAmt
      this.purchaseNew = list[5] === null ? 0 : list[5].orderNum
      this.lossMoney = list[6] === null ? 0 : list[6].sumAmt
      this.loss = list[6] === null ? 0 : list[6].orderNum
      this.lossDay = list[7] === null ? 0 : list[7].sumAmt
      this.lossNew = list[7] === null ? 0 : list[7].orderNum
    },
    clear() {
      this.brokenLine = false
      this.isColumnar = false
      this.ispie = false
      this.isCollapse = false
      this.orderAmount = ''
      this.orders = ''
      this.orderDay = ''
      this.orderNew = ''
      this.deliveryMoney = ''
      this.deliverys = ''
      this.deliveryDay = ''
      this.deliveryNew = ''
      this.purchaseMoney = ''
      this.purchases = ''
      this.purchaseDay = ''
      this.purchaseNew = ''
      this.lossMoney = ''
      this.loss = ''
      this.lossDay = ''
      this.lossNew = ''
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/handle.scss';
.munu {
  width: 100%;
  margin-bottom: 10px;
  & /deep/ .el-card__header {
    padding: 5px 10px;
  }
  & /deep/ .el-card__body {
    padding: 10px;
  }
}
.header_div {
  display: flex;
  justify-content: space-between;
}
.munu_box {
  height: 420px;
  display: flex;
  justify-content: space-between;
}
/deep/ .el-card {
  border: none;
}
/deep/ .el-card__body {
  height: 100%;
}
.carton_card {
  .carton_day {
    float: right;
  }
  .carton_bottom {
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #fff;
    .img1,
    .img2,
    .img3,
    .img4,
    .img5 {
      padding: 10px;
      width: 50%;
      height: 100%;
      margin: 5px;
      display: flex;
      align-items: center;
      // justify-content: center;
    }
    .img1 {
      background: url('../../../../assets/imges/day/1.png') no-repeat;
      background-size: 100% 100%;
    }
    .img2 {
      background: url('../../../../assets/imges/day/2.png') no-repeat;
      background-size: 100% 100%;
    }
    .img3 {
      background: url('../../../../assets/imges/day/3.png') no-repeat;
      background-size: 100% 100%;
    }
    .img4 {
      background: url('../../../../assets/imges/day/4.png') no-repeat;
      background-size: 100% 100%;
    }
    .img-back {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .img-size {
      font-size: 17px;
    }
  }
}
.font {
  font-weight: 500;
  font-size: 14px;
  @include font_color('font_color1');
}
/deep/ .el-radio-button--mini .el-radio-button__inner {
  font-weight: 500;
  font-size: 14px;
  background-color: var(--color_active1);
  color: var(--color_active2);
  //border-color: var(--color_active2);
  -webkit-box-shadow: -1px 0 0 0 var(--color_active2);
  box-shadow: -1px 0 0 0 var(--color_active2);
}
/deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: var(--color1);
  color: var(--color2);
  border-color: var(--color1);
  -webkit-box-shadow: -1px 0 0 0 var(--color1);
  box-shadow: -1px 0 0 0 var(--color1);
}
/deep/ .el-radio-button__inner:hover {
  color: var(--color_active2);
}
.reportForm_card {
  /deep/ .el-card__body {
    width: 100%;
  }
}
.reportForm_back {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 25px;
}
</style>
